<template>
  <view class="page-body">
    <div
      class="page-head"
      :style="
        'background: url(' +
        asyncImgs.chart_gpt.task_head +
        ') 0 0 / 100% 100% no-repeat;'
      "
    >
      <div class="flex-x-sb opacity-4 u-font-24 u-m-b-4">
        <div class="">我的{{ stores.integral_name }}</div>
        <div
          class="flex-y-center"
          @click="$utils.toUrl('/integral/integral/myIntegralDetail')"
        >
          <div>{{ stores.integral_name }}明细</div>
          <div class="iconfont icon-arrow-right u-font-22"></div>
        </div>
      </div>
      <div class="flex" style="align-content: flex-end">
        <div class="flex-w-1">
          <div style="font-size: 64rpx; font-weight: 600">
            {{ pageData.integral || 0 }}
          </div>

          <div
            @click="showRule = true"
            class="u-m-t-18 flex-y-center opacity-4"
          >
            <div>规则说明</div>
            <div class="iconfont icon-help1"></div>
          </div>
        </div>
        <div class="flex-col flex-x-end">
          <div @click="$utils.toUrl('/chart-gpt/pay/pay')" class="pay-bt">
            购买{{ stores.integral_name }}
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="nav-list flex-wrap">
      <div
        class="nav-item flex-col flex-x-center flex-y-center u-m-t-34"
        v-for="(item, i) in navList"
        :key="i"
        @click="$utils.toUrl(item.pageUrl, item.openType)"
        style="width: 25%"
      >
        <image
          :src="item.url"
          mode="aspecFill"
          style="width: 60rpx; height: 60rpx"
        ></image>

        <div class="u-m-t-10 u-font-24">{{ item.name }}</div>
      </div>
    </div> -->

    <div class="task-list">
      <div class="flex-x-sb flex-y-center u-p-t-24 u-p-b-24 border-b">
        <div class="font-w-600 u-font-30">每日任务</div>

        <div class="title-right flex-y-center">
          <image
            mode="aspectFill"
            :src="asyncImgs.chart_gpt.integral_icon"
            style="width: 30rpx; height: 30rpx"
          ></image>
          <div class="u-m-l-6">
            今日可得
            <text class="color-main">
              {{ pageData.use_award_integral || 0 }}/{{
                pageData.all_award_integral || 0
              }}
            </text>
            {{ stores.integral_name }}
          </div>
        </div>
      </div>

      <div class="task-item" v-for="(item, i) in pageData.job" :key="i">
        <div class="left flex-w-1">
          <div class="flex-y-center">
            <div class="u-font-30 font-w-600 u-m-r-20">{{ item.name }}</div>
            <div class="flex-y-center integral-add">
              <image
                mode="aspectFill"
                :src="asyncImgs.chart_gpt.integral_icon"
                style="width: 32rpx; height: 32rpx"
              ></image>
              <div>+{{ item.award_integral }}</div>
            </div>
          </div>

          <div class="color-999 u-font-26 u-m-t-6">
            完成进度{{ item.use_num }}/{{ item.see_num_ }}次
          </div>
        </div>
        <div class="right flex">
          <template v-if="item.use_num < item.see_num_">
            <template v-if="item.type == 1">
              <template v-if="pageData.adpid && pageData.adpid.length">
                <!-- #ifndef MP-TOUTIAO -->
                <!--    <ad-rewarded-video
                  :adpid="pageData.adpid"
                  :url-callback="{
                    userId: userInfo.id + '',
                  }"
                  :loadnext="true"
                  v-slot:default="{ loading }"
                  @load="onadload"
                  @close="onadclose"
                  @error="onaderror"
                >
                  <button
                    :disabled="loading"
                    :loading="loading"
                    class="bt u-button-reset"
                  >
                    去观看
                  </button>
                </ad-rewarded-video> -->
                <!-- #endif -->
              </template>
            </template>
            <div
              v-else
              @click="$utils.toUrl('/integral/signIn/signIn')"
              class="bt"
            >
              去签到
            </div>
          </template>
          <div v-else class="bt bt-1">已完成</div>
        </div>
      </div>
    </div>

    <u-popup
      closeable
      v-model="showRule"
      border-radius="20"
      mode="center"
      :safe-area-inset-bottom="false"
      width="600rpx"
    >
      <view class="flex-x-center u-font-30 font-w-600 u-p-t-30 u-p-b-30">
        规则说明
      </view>

      <scroll-view
        scroll-y
        style="max-height: 60vh; min-height: 30vh; padding: 0 30rpx"
      >
        <div style="font-size: 26rpx; line-height: 1.5">
          {{ pageData.rule }}
        </div>
      </scroll-view>
    </u-popup>

    <FootNav :controlList="tabBarData"></FootNav>
  </view>
</template>
<script>
import tabBarData from "@/chart-gpt/static/js/tabbarJson.js";
import FootNav from "@/components/diyNew/footNav/index"

export default {
  components: {
    FootNav,
  },
  data() {
    return {
      tabBarData,
      pageData: "",

      showRule: false,
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const res = await this.$allrequest.chart.questionTemplateIndex({}, true);
      this.pageData = res.data;
    },
    async addIntegral(fn) {
      const res = await this.$allrequest.chart.addIntegral({}, true);
      uni.$u.toast(res.msg);
      fn && fn();
    },
    onadload(e) {
    },
    onadclose(e) {
      const detail = e.detail;
      // 用户点击了【关闭广告】按钮
      if (detail && detail.isEnded) {
        // 正常播放结束
        uni.showModal({
          title: "提示",
          content: "广告观看完成!",
          showCancel: false,
          success: (success) => {
            this.addIntegral(() => {
              this.loadData();
            });
          },
        });
      } else {
        // 播放中途退出
        uni.showModal({
          title: "提示",
          content: "中途退出",
          showCancel: false,
        });
      }
    },
    onaderror(e) {
      // 广告加载失败
      uni.showModal({
        title: "获取广告失败！",
        content: e.detail.errMsg,
        showCancel: false,
      });
    },
  },
  computed: {
    // navList() {
    //   return [
    //     {
    //       url: this.asyncImgs.chart_gpt?.nav_gouwu ,
    //       name: '商城购物',
    //       pageUrl: '/pages/home/home',
    //       openType: 'switchtab',
    //     },
    //     {
    //       url: this.asyncImgs.chart_gpt?.nav_qiandao,
    //       name: '每日签到',
    //       pageUrl: '/integral/signIn/signIn',
    //       openType: 'navigate',
    //     },
    //     {
    //       url: this.asyncImgs.chart_gpt?.nav_jifen,
    //       name: '消费返积分',
    //       pageUrl: '/pages/home/home',
    //       openType: 'switchtab',
    //     },
    //     {
    //       url: this.asyncImgs.chart_gpt?.nav_shangcheng,
    //       name: '积分商城',
    //       pageUrl: '/integral/integralStore/index',
    //       openType: 'navigate',
    //     },
    //     {
    //       url: this.asyncImgs.chart_gpt?.nav_chongzhi,
    //       name: '充值中心',
    //       pageUrl: '/chart-gpt/pay/pay',
    //       openType: 'navigate',
    //     },
    //   ];
    // },
    userInfo() {
      return this.$store.getters["userInfo"];
    },
  },
  watch: {},
  onReachBottom() {},
  onPullDownRefresh() {},
};
</script>
<style lang="scss" scoped>
.page-body {
  min-height: 100vh;
  padding: 24rpx 24rpx calc(100rpx + env(safe-area-inset-bottom));
  background: #f2f2f2;

  .border-b {
    border-bottom: 1px solid #f2f2f2;
  }
  .page-head {
    padding: 40rpx;
    border-radius: 20rpx;
    height: 260rpx;
    color: #fff;
    .opacity-4 {
      opacity: 0.5;
    }
    .pay-bt {
      color: #f0250e;
      font-weight: 600;
      text-align: center;
      width: 192rpx;
      line-height: 78rpx;
      background: #ffffff;
      border-radius: 120rpx;
    }
  }

  .nav-list {
    margin-top: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    padding-bottom: 34rpx;
  }

  .task-list {
    margin-top: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0 24rpx;
    .title-right {
      font-size: 24rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 0 20rpx;
      background: #f2f2f2;
      border-radius: 30rpx;
      .color-main {
        color: #f0250e;
      }
    }

    .task-item {
      padding: 24rpx 0;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
      &:nth-last-child(1) {
        border: 0 solid #000;
      }
      .integral-add {
        height: 32rpx;
        line-height: 32rpx;
        background: #fff5e5;
        border-radius: 120px;
        color: #ffa200;
        font-size: 22rpx;
        padding-right: 10rpx;
      }

      .right {
        .bt {
          height: 68rpx;
          line-height: 68rpx;
          padding: 0 24rpx;
          background: #f0250e;
          border-radius: 50rpx;
          color: #fff;
          font-size: 26rpx;
        }
        .bt-1 {
          color: #666;
          background: #f2f2f2;
        }
      }
    }
  }
}
</style>
